<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: Wupy
 * @Date: 2023-01-09 09:35:52
 * @LastEditors: Wupy
 * @LastEditTime: 2023-02-20 11:25:43
-->
<template>
    <div class="discuss">
        <!-- 讨论单元卡片 -->
        <div class="discussCard" v-for="item in lessonName.topicList" >
            <div class="card" @click="toDiscussDetail(item.id)">
                <!-- 卡片左边 -->
                <div class="left">
                    <div class="discussTitle">
                        {{ item.name }}
                    </div>
                    <div class="discussUser">
                        <!-- <div class="userAvatar">
                            <var-image :radius="10" :src="imgRequire(item.userAvatar)" class="avatarImg" alt=""/>
                        </div> -->
                        <div class="userName">
                            {{ item.teacherName }}
                        </div>
                        <div class="discussTime">
                            {{ item.createTime }}发布
                        </div>
                    </div>
                </div>
                <!-- 卡片右边 -->
                <!-- <div class="right">
                    <var-image class="discussImg" :src="imgRequire(item.discussImg)" alt=""/>
                </div> -->
            </div>

            <var-divider />

        </div>
    </div>
    <!-- <div class="addDiscuss">
        <var-image class="addIcon" @click="addDiscuss()" src="./image/addDiscuss.png" alt=""/>
    </div> -->
</template>

<script lang="ts" setup>
import router from '@/router';
import { ref,onMounted } from 'vue'
import { useRoute } from 'vue-router';
import {useLessonStore} from '@/stores/lesson'
import {storeToRefs} from 'pinia'

const route = useRoute()
const lessonStore = useLessonStore()

const {LessonInFo,getLessonName} = lessonStore
const {lessonInfo,lessonName} = storeToRefs(lessonStore)
//定义显示图片的方法
const imgRequire = (img: string) => {
    try {
        const handlePath = img.replace('.', '.');
        return new URL(handlePath, import.meta.url).href;
    } catch (error) {
        console.warn(error);
    }
};

// 获取课程id
const courseId = route.query.courseId|| localStorage.getItem('courseId')

// 讨论列表
const discussList = ref([
    {
        discussTitle: '山西农业大学返校第一天你有收获吗',
        userAvatar: './image/avatarExa.jpg',
        userName: '蔡敏敏',
        discussImg: './image/discussExa.jpg',
        discussTime:'1月9日'
    },
    {
        discussTitle: '山西农业大学返校第一天你有收获吗',
        userAvatar: './image/avatarExa.jpg',
        userName: '蔡敏敏',
        discussImg: './image/discussExa.jpg',
        discussTime:'1月9日'

    },
    {
        discussTitle: '山西农业大学返校第一天你有收获吗',
        userAvatar: './image/avatarExa.jpg',
        userName: '蔡敏敏',
        discussImg: './image/discussExa.jpg',
        discussTime:'1月9日'

    },
    {
        discussTitle: '山西农业大学返校第一天你有收获吗',
        userAvatar: './image/avatarExa.jpg',
        userName: '蔡敏敏',
        discussImg: './image/discussExa.jpg',
        discussTime:'1月9日'

    },
    {
        discussTitle: '山西农业大学返校第一天你有收获吗',
        userAvatar: './image/avatarExa.jpg',
        userName: '蔡敏敏',
        discussImg: './image/discussExa.jpg',
        discussTime:'1月9日'

    },
    {
        discussTitle: '山西农业大学返校第一天你有收获吗',
        userAvatar: './image/avatarExa.jpg',
        userName: '蔡敏敏',
        discussImg: './image/discussExa.jpg',
        discussTime:'1月9日'

    },
    {
        discussTitle: '山西农业大学返校第一天你有收获吗',
        userAvatar: './image/avatarExa.jpg',
        userName: '蔡敏敏',
        discussImg: './image/discussExa.jpg',
        discussTime:'1月9日'

    },  
])
// 点击讨论的方法
function toDiscussDetail(id:any){
    router.push({
        path:'/discussDetail',
        query:{
            topicId:id
        }
    })
    
}
// 添加讨论的方法
// function addDiscuss(){
//     router.push('./addDiscuss')
// }
onMounted(async() => {
   await LessonInFo(courseId)
   await getLessonName(courseId)
})

</script>

<style lang="less" scoped>
.discuss {
    margin: 10px;

    .discussCard {
        // width: 365px;
        padding-top: 10px;
        background-color: #fff;

        .card {
            display: flex;
            .left {
                display: flex;
                flex-direction: column;

                .discussTitle {
                    font-weight: 600;
                    font-size: 17px;
                    margin-left: 20px;
                }

                .discussUser {
                    display: flex;
                    margin-left: 12px;
                    margin-top: 15px;
                    height: 23px;

                    .userAvatar {
                        margin-top: -5px;

                        .avatarImg {
                            width: 20px;
                            border-radius: 20px;
                        }
                    }

                    .userName {
                        margin-left: 5px;
                        font-size: 11px;
                        color: #A0A4BF;
                    }
                    .discussTime{
                        margin-left: 20px;
                        font-size: 11px;
                        color: #a4a6b5;
                    }
                }
            }

            .right {
                margin-top: 10px;
                margin-left: 20px;

                .discussImg {
                    width: 70px;
                    height: 50px;
                }
            }
        }

    }
}
.addDiscuss{
    position: fixed;
    right: 10px;
    bottom: 30px;
    .addIcon{
        width: 50px;
    }
}
</style>